<template>
  <div class="u-flex" style="flex-wrap: wrap">
    <div class="home-card-list br10 pd15">
      <span class="fs16">访问量</span>
      <div class="u-flex jc-b mgt10 fs24">
        <i class="iconfont icon-zhuzhuangtu" />
        <span>9,999</span>
      </div>
    </div>
    <div class="home-card-list br10 pd15">
      <span class="fs16">成交额</span>
      <div class="u-flex jc-b mgt10 fs24">
        <i class="iconfont icon-money" />
        <span>$9,999</span>
      </div>
    </div>
    <div class="home-card-list br10 pd15">
      <span class="fs16">下载数</span>
      <div class="u-flex jc-b mgt10 fs24">
        <i class="iconfont icon-download" />
        <span>9,999</span>
      </div>
    </div>
    <div class="home-card-list br10 pd15">
      <span class="fs16">成交数</span>
      <div class="u-flex jc-b mgt10 fs24">
        <i class="iconfont icon-r" />
        <span>9,999</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.home-card-list {
  box-sizing: border-box;
  flex: 1;
  margin-right: 15px;
  margin-bottom: 15px;
  min-width: 200px;
  height: 100px;
  background: linear-gradient(to top left, #bc55a3, #ea4787);
  color: #fff;
}
.home-card-list:nth-child(2) {
  background: linear-gradient(to top left, #5345b4, #845dc0);
}
.home-card-list:nth-child(3) {
  background: linear-gradient(to top left, #709fe4, #57cbf2);
}
.home-card-list:last-child {
  // margin-right: 0;
  background: linear-gradient(to top left, #f68355, #fcb927);
}
.iconfont {
  font-size: 28px;
}
</style>
